<template>
<el-dialog title="选择常用按钮" append-to-body class="button"   v-model="visible" draggable>
      <vxe-table
        border
        auto-resize
        resizable
        height="450px"
        :loading="loading"
        size="small"
        row-id="code"
        ref="buttonTable"
        show-header-overflow
        show-overflow
        highlight-hover-row
        :menu-config="{}"
        :print-config="{}"
        :import-config="{}"
        :export-config="{}"
        :checkbox-config="{reserve: true,  highlight: true}"
        @sort-change="sortChangeHandle"
        :sort-config="{remote:true}"
        :data="dataList">
        <vxe-column type="seq" width="40"></vxe-column>
        <vxe-column type="checkbox"  width="40px"></vxe-column>
        <vxe-column  title="名称" field="name" sortable></vxe-column>
        <vxe-column  title="编码" field="code" sortable> </vxe-column>
        <vxe-column  title="排序" field="sort" sortable> </vxe-column>
      </vxe-table>
      <!-- <vxe-pager
        background
        size="small"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :total="tablePage.total"
        :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="currentChangeHandle">
      </vxe-pager> -->

  <template #footer>
      <span class="dialog-footer">
        <el-button  @click="visible = false">取 消</el-button>
        <el-button  type="primary" @click="submit">确 定</el-button>
      </span>
  </template>
</el-dialog>
</template>

<script>
  import buttonService from '@/api/flowable/buttonService'
  export default {
    data () {
      return {
        dataList: [],
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          orders: [{column: 'sort', asc: true}]
        },
        idKey: 'code',
        loading: false,
        visible: false
      }
    },
    methods: {
      init (selectData) {
        this.refreshList()
        this.visible = true
        this.$nextTick(() => {
          this.$refs.buttonTable.clearCheckboxRow()
          this.$refs.buttonTable.setCheckboxRow(selectData, true)
        })
      },
            // 获取数据列表
      refreshList () {
        this.loading = true
        buttonService.list({
          'current': this.tablePage.currentPage,
          'size': this.tablePage.pageSize,
          'orders': this.tablePage.orders,
          ...this.searchForm
        }).then((data) => {
          this.dataList = data.records
          this.tablePage.total = data.total
          this.loading = false
        })
      },
      // 当前页
      currentChangeHandle ({ currentPage, pageSize }) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.refreshList()
      },
      // 排序
      sortChangeHandle (column) {
        this.tablePage.orders = []
        if (column.order != null) {
          this.tablePage.orders.push({column: this.$utils.toLine(column.property), asc: column.order === 'asc'})
        }else{
          this.tablePage.orders = [{column: 'sort', asc: true}]
        }
        this.refreshList()
      },
      submit () {
        const selectReserveRecords = this.$refs.buttonTable.getCheckboxReserveRecords()
        const selectRecords = this.$refs.buttonTable.getCheckboxRecords()
        this.$emit('selectButton', JSON.parse(JSON.stringify(selectReserveRecords.concat(selectRecords))))
        this.visible = false
      }
    }
  }
</script>
<style>
.button .el-dialog__body {
    padding: 5px;
}
</style>